<template>
  <div>
    <!-- 首页 -->
    <!-- 显示echarts图表 -->
    <div id="chart1"></div>
    <div id="chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      categoryData: {
        title: "教练类型",
        counts: [35, 67, 44, 47, 43, 42, 35, 20],
      },
    };
  },
mounted () {
  this.initChart1()
  this.initChart2()
},
  methods: {
    initChart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.categoryData.title,
        },
        tooltip: {},
        xAxis: {
          data: ["瑜伽","普拉提","减脂","增肌", "塑形","体态改善","提升体能","舒缓减压",]
        },
        yAxis: {},
        series: [
          {
            name: "类型",
            type: "bar",
            data: this.categoryData.counts,
          },
        ],
      });
    },

    initChart2(){
      var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;

function randomData() {
  now = new Date(+now + oneDay);
  value = value + Math.random() * 21 - 10;
  return {
    name: now.toString(),
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
      Math.round(value)
    ]
  };
}
let data = [];
let now = new Date(2010, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
  data.push(randomData());
}
option = {
  title: {
    text: '所有健身房使用总人数'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      params = params[0];
      var date = new Date(params.name);
      return (
        date.getDate() +
        '/' +
        (date.getMonth() + 1) +
        '/' +
        date.getFullYear() +
        ' : ' +
        params.value[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data
    }
  ]
};
setInterval(function () {
  for (var i = 0; i < 5; i++) {
    data.shift();
    data.push(randomData());
  }
  myChart.setOption({
    series: [
      {
        data: data
      }
    ]
  });
}, 1000);

option && myChart.setOption(option);
    }

  },
};
</script>

<style lang="scss" scoped>
#chart1 {
  width: 600px;
  height: 400px;
}
#chart2 {
  width: 100%;
  height: 400px;
}
</style>
